<template>
  <div>
    <div class="heihei" v-for="(v, i) in arr" :key="i">
      <img :src="v.imgsrc" alt="" />
      <span class="wuwu">{{ v.titile }}</span>
      <span class="haha">{{ v.text }}</span>
      <span class="xixi">去绑卡&nbsp;&gt;</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          imgsrc: "img/c01_08.gif",
          titile: "财付通",
          text: "首绑享8元微信红包",
        },
        {
          imgsrc: "img/c01_11.gif",
          titile: "支付宝",
          text: "首绑最高得106元红包",
        },
        {
          imgsrc: "img/c01_12.gif",
          titile: "拼多多",
          text: "首绑最高得10元立减权益",
        },
        {
          imgsrc: "img/c01_13.gif",
          titile: "京东",
          text: "首绑享至高28元京东支付红包",
        },
        {
          imgsrc: "img/c01_14.gif",
          titile: "美团",
          text: "送最低40元美团礼包",
        },
        { imgsrc: "img/c01_15.gif", titile: "云闪付" },
        { imgsrc: "img/c01_16.gif", titile: "抖音支付" },
        { imgsrc: "img/c01_17.gif", titile: "滴滴支付" },
        { imgsrc: "img/c01_18.gif", titile: "苏宁金融" }
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.heihei{
  display: flex;
  margin-left: 0.16rem;
  width: 100%;
  height: 0.54rem;
  line-height: 0.54rem;
  border-bottom: 2px solid #f8f8f8;
  .wuwu{
    font-weight: 700;
  }
  .haha {
    height: 0.12rem;
    font-size: 0.1rem;
    color: red;
    // border: 1px solid red;
    text-align: center;
    line-height: 0.12rem;
    margin-top: 0.2rem;
    margin-left: 0.06rem;
  }
  .xixi {
    position: absolute;
    right: .16rem;
    font-size: .14rem;
    // width: 1rem;
    // display: block;
    // float: right;
    // margin-right: 0.16rem;
  }
}
</style>